<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:26:15
 * @LastEditTime: 2022-06-23 14:26:15
 * @LastEditors: 陆成杰
 * @FilePath: /BOE/src/views/device-manager/DeviceList.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <div class="header">
      <!-- 收起状态 -->
      <div class="stow" v-if="state.isStow == true">
        <div style="display: flex">
          <div class="stow-title">设备名称:</div>
          <div class="stow-input">
            <input type="text" placeholder="请输入节目名称" />
          </div>
        </div>
        <div style="display: flex">
          <div class="stow-title">所属机构:</div>
          <div class="stow-select">
            <select @change="chooseMechanism($event)">
              <option
                :value="item"
                v-for="(item, index) in state.mechanism"
                :key="index"
              >
                {{ item }}
              </option>
            </select>
          </div>
        </div>
        <div style="display: flex">
          <div class="stow-title">所属分组:</div>
          <div class="stow-select">
            <select @change="chooseGroup($event)">
              <option
                :value="item"
                v-for="(item, index) in state.group"
                :key="index"
              >
                {{ item }}
              </option>
            </select>
          </div>
        </div>
        <div class="stow-button">
          <button class="stow-button-item1">重 置</button>
          <button class="stow-button-item2">查 询</button>
          <div class="stow-button-item3" @click="goOpen">
            <div class="stow-button-item3-title">展开</div>
            <div class="stow-button-item3-photo">
              <img src="../../assets/device/stwo.svg" />
            </div>
          </div>
        </div>
      </div>
      <!-- 展开状态 -->
      <div class="open" v-if="state.isStow == false">
        <div class="open-one">
          <div style="display: flex">
            <div class="open-one-title">设备名称:</div>
            <div class="open-one-input">
              <input type="text" placeholder="请输入设备名称" />
            </div>
          </div>
          <div style="display: flex">
            <div class="open-one-title">所属机构:</div>
            <div class="open-one-select">
              <select @change="chooseMechanism($event)">
                <option
                  :value="item"
                  v-for="(item, index) in state.mechanism"
                  :key="index"
                >
                  {{ item }}
                </option>
              </select>
            </div>
          </div>
          <div style="display: flex">
            <div class="open-one-title">所属分组:</div>
            <div class="open-one-select">
              <select @change="chooseGroup($event)">
                <option
                  :value="item"
                  v-for="(item, index) in state.group"
                  :key="index"
                >
                  {{ item }}
                </option>
              </select>
            </div>
          </div>
          <div style="display: flex">
            <div class="open-one-title">MAC地址:</div>
            <div class="open-one-input">
              <input type="text" placeholder="请输入MAC地址" />
            </div>
          </div>
        </div>
        <div class="open-two">
          <div style="display: flex">
            <div class="open-two-title">&nbsp;&nbsp;分 辨 率:</div>
            <div class="open-two-input">
              <input type="text" placeholder="请输入分辨率" />
            </div>
          </div>
          <div style="display: flex">
            <div class="open-two-title">设备状态:</div>
            <div class="open-two-select">
              <select @change="chooseMechanism($event)">
                <option
                  :value="item"
                  v-for="(item, index) in state.state"
                  :key="index"
                >
                  {{ item }}
                </option>
              </select>
            </div>
          </div>
          <div style="display: flex">
            <div class="open-two-title">系统版本:</div>
            <div class="open-two-select">
              <select @change="chooseGroup($event)">
                <option
                  :value="item"
                  v-for="(item, index) in state.version"
                  :key="index"
                >
                  {{ item }}
                </option>
              </select>
            </div>
          </div>
          <div style="display: flex">
            <div class="open-two-title">当前计划:</div>
            <div class="open-two-select">
              <select @change="chooseGroup($event)">
                <option
                  :value="item"
                  v-for="(item, index) in state.plan"
                  :key="index"
                >
                  {{ item }}
                </option>
              </select>
            </div>
          </div>
        </div>
        <div class="open-three">
          <div style="display: flex">
            <div class="open-three-title">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SN:
            </div>
            <div class="open-three-input">
              <input type="text" placeholder="请输入SN号" />
            </div>
          </div>
          <!-- 按钮 -->
          <div class="open-three-button">
            <button class="open-three-button-item1">重 置</button>
            <button class="open-three-button-item2">查 询</button>
            <div class="open-three-button-item3" @click="goStow">
              <div class="open-three-button-item3-title">收起</div>
              <div class="open-three-button-item3-photo">
                <img src="../../assets/device/open.svg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-btn">
        <div class="content-btn-item1">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="handleChange"
            :file-list="fileList"
            :show-file-list="false"
            class="el-upload"
            ><el-button type="text">点击上传</el-button>
          </el-upload>
        </div>
        <div class="content-btn-item2">
          <button>
            <a
              class="content-btn-item2-down"
              href="template.xlsx"
              target="_blank"
              download="template.xlsx"
              style="text-decoration: none; color: black"
              >模板下载</a
            >
            <!-- 模板下载 -->
          </button>
        </div>
        <div class="content-btn-item3"><button>批量删除</button></div>
        <div class="content-btn-item3"><button>批量控制</button></div>
        <div class="content-btn-item3"><button>数据导出</button></div>
      </div>

      <div>
        <el-table
          :data="state.mechanismList"
          style="width: 100%"
          size="default"
          class="el-table"
          :header-cell-style="{ background: 'rgb(35, 39, 56)' }"
          :cell-style="{ background: 'rgb(41, 45, 62)', color: '#fff' }"
        >
          <el-table-column prop="Name" label="设备名称" width="140" />
          <el-table-column prop="OrganizationID" label="所属机构" width="160" />
          <el-table-column prop="group" label="所属分组" width="160" />
          <el-table-column prop="Mac" label="MAC地址" width="160" />
          <el-table-column prop="size" label="分辨率" width="160" />
          <el-table-column prop="State" label="设备状态" width="120" />
          <el-table-column prop="UpdatedAt" label="系统升级" width="100" />
          <el-table-column prop="plan" label="当前计划" width="" />
          <el-table-column prop="do" label="操作" width="260">
            <template #default="scope">
              <button @click="infoMecha(scope.$index, scope.row)" class="btns">
                详情
              </button>
              <button
                disable="false"
                @click="handleEdit(scope.$index, scope.row)"
                class="unbtns"
              >
                控制
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                刷新
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                编辑
              </button>
              <button
                @click="deleteMecha(scope.$index, scope.row)"
                class="btns"
              >
                删除
              </button>
              <div>
                <el-dialog
                  title="提示"
                  v-model="state.isDelete"
                  width="30%"
                  :before-close="handleClose"
                >
                  <div>确定删除该设备</div>
                  <div style="margin-left: 70%">
                    <el-button @click="noDelete">取 消</el-button>
                    <el-button
                      type="primary"
                      @click="yesDelete(scope.$index, scope.row)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 设备详情弹窗 -->
      <div class="info">
        <el-dialog
          title="设备详情"
          v-model="state.infomecha"
          width="35%"
          :before-close="handleClose"
        >
          <el-tabs v-model="state.activeName" @tab-click="handleClick">
            <el-tab-pane label="设备信息" name="first">
              <div class="info-first">
                <div class="info-first-item">
                  <div>设备型号：{{ state.infoMechaList.HardwareID }}</div>
                  <div>系统版本：BOE_iGallery32_V13103_V5.2.0</div>
                </div>
                <div class="info-first-item">
                  <div>设备IP：{{ state.infoMechaList.IP }}</div>
                  <div>信发版本：{{ state.infoMechaList.AppVersion }}</div>
                </div>
                <div class="info-first-item">
                  <div>有线MAC地址：{{ state.infoMechaListName.Mac }}</div>
                  <div>无线MAC地址：{{ state.infoMechaListName.Mac }}</div>
                </div>
                <div class="info-first-item">
                  <div>运行内存：{{ state.infoMechaList.Memory }}</div>
                  <div>SN：T232BS200721000123</div>
                </div>
                <div class="info-first-item">
                  <div>存储空间：{{ state.infoMechaList.Storage }}</div>
                  <div>激活时间：{{ state.infoMechaList.CreatedAt }}</div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="安装信息" name="second">
              <div class="info-first">
                <div class="info-first-item">
                  <div>设备名称：{{ state.infoMechaListName.Name }}</div>
                  <div>注册时间：{{ state.infoMechaList.CreatedAt }}</div>
                </div>
                <div class="info-first-item">
                  <div>所属分组：{{ state.infoMechaListName.group }}</div>
                  <div>分辨率：{{ state.infoMechaList.Resolution }}</div>
                </div>
                <div class="info-first-item">
                  <div>
                    所属机构：{{ state.infoMechaListName.OrganizationID }}
                  </div>
                  <div>显屏方式：横屏</div>
                </div>
                <!-- <div>安装位置：{{ state.infoMechaList. }}</div> -->
              </div>
            </el-tab-pane>
            <el-tab-pane label="状态信息" name="third">
              <div class="info-first">
                <div style="height: 40px">
                  设备状态：{{ state.infoMechaListName.State }}
                </div>
                <div style="height: 40px">
                  当前计划：{{ state.infoMechaListName.PlanID }}
                </div>
                <div style="height: 40px">
                  运行时长：{{ state.infoMechaList.RunningTime }}
                </div>
                <div style="height: 40px">
                  最后心跳时间：{{ state.infoMechaList.LastHeartbeat }}
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="info-btn">
            <el-button type="primary" @click="state.infomecha = false"
              >返 回</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { read, utils } from "xlsx"; // 注意处理方法引入方式
import {
  getMechanism,
  addMechanism,
  deleteMechanism,
  infoMechanism,
} from "../../axios/device";
import { getOrg } from "../../axios/organization";
import moment from "moment";
onMounted(() => {
  getMechanismList();
  getOrgList();
});
const state = reactive({
  mechanism: ["城院罗老师测试"],
  group: ["123", "1234", "12345", "111"],
  state: ["全部", "播放", "空闲", "离线"],
  version: ["全部", "已是最新", "升级", "有新版本"],
  plan: ["123", "111", "1", "test"],
  isStow: false,
  // fileList: [],
  // file: "",
  fileList: [], //上传文件列表
  tableHead: [], //表头
  tableData: [], // 表数据
  mechanismList: [], //设备列表，从数据库取的
  orgList: [], //组织列表，数据库读取
  addName: "",
  addMac: "",
  infomecha: false, //设备详情弹窗，false不显示
  activeName: "first", //设备详情弹窗标签页
  infoMechaList: [], //设备详情信息，数据库取
  infoMechaListName: [], //设备详情信息，取表格显示的数据
  isDelete: false, //确认删除设备弹窗
  deleteM: false, //确认删除设备,false取消删除,true确认删除
});
// 接口功能函数
//获取组织列表
const getOrgList = () => {
  getOrg().then((res) => {
    console.log(res);
  });
};
// 获取设备列表
const getMechanismList = () => {
  // var _stata = state;
  getMechanism("0", "100").then((res) => {
    console.log(res);
    state.mechanismList = res.data.devices;
    for (let i = 0; i < state.mechanismList.length; i++) {
      state.mechanismList[i].OrganizationID = "test_o";
      state.mechanismList[i].group = "-";
      state.mechanismList[i].size = "1920x1080（横）";
      state.mechanismList[i].UpdatedAt = "已是最新";
    }
  });
};
//删除设备
const noDelete = () => {
  state.isDelete = false;
  state.deleteM = false;
};
const yesDelete = (index, row) => {
  state.isDelete = false;
  state.deleteM = true;
  console.log(state.deleteM);
  if (state.deleteM == true) {
    deleteMechanism(row.ID).then((res) => {
      console.log(res);
      if (res.code == 200) {
        getMechanism("0", "100").then((ress) => {
          console.log(ress);
          state.mechanismList = ress.data.devices;
          for (let i = 0; i < state.mechanismList.length; i++) {
            state.mechanismList[i].OrganizationID = "test_o";
            state.mechanismList[i].group = "-";
            state.mechanismList[i].size = "1920x1080（横）";
            state.mechanismList[i].UpdatedAt = "已是最新";
          }
        });
      }
    });
  }
};
const deleteMecha = (index, row) => {
  console.log(row.ID);
  state.isDelete = true;
  console.log(state.deleteM);
  if (state.deleteM == true) {
    deleteMechanism(row.ID).then((res) => {
      console.log(res);
      if (res.code == 200) {
        getMechanism("0", "100").then((ress) => {
          console.log(ress);
          state.mechanismList = ress.data.devices;
          for (let i = 0; i < state.mechanismList.length; i++) {
            state.mechanismList[i].OrganizationID = "test_o";
            state.mechanismList[i].group = "-";
            state.mechanismList[i].size = "1920x1080（横）";
            state.mechanismList[i].UpdatedAt = "已是最新";
          }
        });
      }
    });
  }
};
//获取设备详情
const infoMecha = (index, row) => {
  console.log(row);
  state.infoMechaListName = row;
  console.log(state.infoMechaListName);
  infoMechanism(index).then((res) => {
    console.log(res);
    state.infomecha = true;
    state.infoMechaList = res.data;
    console.log(state.infoMechaList);
    state.infoMechaList.CreatedAt = moment(
      state.infoMechaList.CreatedAt
    ).format("YYYY-MM-DD HH:mm:ss");
    state.infoMechaList.LastHeartbeat = moment(
      state.infoMechaList.LastHeartbeat
    ).format("YYYY-MM-DD HH:mm:ss");
  });
};
// 设备详情弹窗标签页
const handleClick = (tab, event) => {
  console.log(tab, event);
};
// 导入成功时执行
const handleChange = (res, file, fileList) => {
  // 将文件放入
  for (let i = 0; i < fileList.length; i++) {
    if (file.name != fileList[i].name) {
      state.fileList.push({
        name: file.name,
        url: "",
        uid: file.uid,
      });
    }
  }
  const files = { 0: file };
  readExcel(files);
};
const readExcel = (file) => {
  let _state = state;
  const fileReader = new FileReader();

  fileReader.onload = (ev) => {
    try {
      const data = ev.target.result;
      const workbook = read(data, { type: "binary" });
      const params = [];
      // 取对应表生成json表格内容
      workbook.SheetNames.forEach((item) => {
        _state.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
      });

      console.log(_state.tableData.length);
      for (let i = 1; i <= state.tableData.length; i++) {
        console.log(i);
        state.addName = state.tableData[0][i].AddName;
        state.addMac = state.tableData[0][i].AddMac;
        console.log(state.addName);
        console.log(state.addMac);

        addMechanism(state.addName, state.addMac).then((res) => {
          console.log(res);
          if (res.code == 200) {
            getMechanism("0", "100").then((res) => {
              console.log(res);
              state.mechanismList = res.data.devices;
              for (let i = 0; i < state.mechanismList.length; i++) {
                state.mechanismList[i].OrganizationID = "test_o";
                state.mechanismList[i].group = "-";
                state.mechanismList[i].size = "1920x1080（横）";
                state.mechanismList[i].UpdatedAt = "已是最新";
              }
            });
          }
        });
      }

      // 该算法仅针对表头无合并的情况
      if (_state.tableData.length > 0) {
        // 获取excel中第一个表格数据tableData[0][0]，并且将表头提取出来
        for (const key in _state.tableData[0][0]) {
          _state.tableHead.push(key);
        }
      }
      // 重写数据
    } catch (e) {
      console.log("error:" + e);
      return false;
    }
  };
  console.log(state.tableHead);
  console.log(state.tableData);

  fileReader.readAsBinaryString(file[0].raw);
  // 读取excel数据成功后传给后台
  console.log("循环");
  console.log(state.tableData[0]);
  // for (let i = 0; i < state.tableData.length; i++) {
  //   state.addName = state.tableData[i].AddName;
  //   state.addMac = state.tableData[i].AddMac;
  //   console.log(state.addName);
  //   console.log(state.addMac);

  //   // addMechanism(state.addName, state.addMac).then((res) => {
  //   //   console.log(res);
  //   // });
  // }
};
// const tableData = [
//   {
//     name: "测试误删",
//     mechanism: "城院罗老师测试",
//     group: "fff",
//     mac: "A0BB3ED2F376",
//     size: "1920x1080（横）",
//     state: "·  离线",
//     update: "已是最新",
//     plan: "-",
//   },
// ];
const goOpen = () => {
  state.isStow = false;
};
const goStow = () => {
  state.isStow = true;
};
</script>

<style lang="less" scoped>
.stow {
  width: 99%;
  height: 80px;
  background-color: rgb(41, 45, 62);
  margin-left: 0.5%;
  display: flex;
  justify-content: space-between;
  &-title {
    line-height: 80px;
    color: #fff;
    margin-left: 25px;
    font-size: 14px;
  }
  &-input input {
    width: 180px;
    height: 25px;
    margin-top: 28px;
    margin-left: 10px;
    background-color: rgb(35, 39, 56);
    border: none;
    color: #fff;
    padding-left: 10px;
    outline-color: rgb(24, 144, 255);
    background-image: url(../../assets/program/search.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 170px;
  }
  &-select select {
    width: 180px;
    height: 28px;
    margin-top: 25px;
    margin-left: 10px;
    background-color: rgb(35, 39, 56);
    border: none;
    color: #fff;
    padding-left: 10px;
    outline-color: rgb(24, 144, 255);
  }
  &-button {
    margin-right: 20px;
    margin-top: 20px;
    display: flex;
    &-item1 {
      width: 70px;
      height: 35px;
      border: none;
      border-radius: 1px;
    }
    &-item2 {
      width: 70px;
      height: 35px;
      margin-left: 10px;
      background-color: rgb(24, 144, 255);
      border: none;
      // color: rgb(0, 0, 0);
      border-radius: 1px;

      // &-down {
      //   width: 70px;
      //   height: 35px;
      //   text-decoration: none;
      //   text-decoration-line: none;
      //   color: black;
      // }
    }
    &-item3 {
      width: 70px;
      height: 35px;
      margin-left: 20px;
      border: none;
      color: #fff;
      border-radius: 1px;
      display: flex;
      &-title {
        color: #1890ff;
        line-height: 35px;
      }
      &-photo {
        height: 25px;
        margin-top: 3px;
      }
      &-photo img {
        height: 30px;
        width: 30px;
      }
    }
  }
}
.open {
  width: 99%;
  // height: 80px;
  background-color: rgb(41, 45, 62);
  margin-left: 0.5%;
  &-one {
    width: 96%;
    margin-left: 1%;
    display: flex;
    justify-content: space-between;
    &-title {
      line-height: 80px;
      color: #fff;
      margin-left: 25px;
      font-size: 14px;
    }
    &-input input {
      width: 180px;
      height: 25px;
      margin-top: 28px;
      margin-left: 10px;
      background-color: rgb(35, 39, 56);
      border: none;
      color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
      background-image: url(../../assets/program/search.svg);
      background-repeat: no-repeat;
      background-size: 15px 15px;
      background-position: 170px;
    }
    &-select select {
      width: 180px;
      height: 28px;
      margin-top: 25px;
      margin-left: 10px;
      background-color: rgb(35, 39, 56);
      border: none;
      color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
    }
  }
  &-two {
    width: 96%;
    margin-left: 1%;
    display: flex;
    justify-content: space-between;
    margin-top: -15px;
    &-title {
      line-height: 80px;
      color: #fff;
      margin-left: 25px;
      font-size: 14px;
    }
    &-input input {
      width: 180px;
      height: 25px;
      margin-top: 28px;
      margin-left: 10px;
      background-color: rgb(35, 39, 56);
      border: none;
      color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
      background-image: url(../../assets/program/search.svg);
      background-repeat: no-repeat;
      background-size: 15px 15px;
      background-position: 170px;
    }
    &-select select {
      width: 180px;
      height: 28px;
      margin-top: 25px;
      margin-left: 10px;
      background-color: rgb(35, 39, 56);
      border: none;
      color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
    }
  }
  &-three {
    width: 96%;
    margin-left: 1%;
    display: flex;
    justify-content: space-between;
    margin-top: -15px;
    &-title {
      line-height: 80px;
      color: #fff;
      margin-left: 25px;
      font-size: 14px;
    }
    &-input input {
      width: 180px;
      height: 25px;
      margin-top: 28px;
      margin-left: 10px;
      background-color: rgb(35, 39, 56);
      border: none;
      color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
      background-image: url(../../assets/program/search.svg);
      background-repeat: no-repeat;
      background-size: 15px 15px;
      background-position: 170px;
    }
    &-select select {
      width: 180px;
      height: 28px;
      margin-top: 25px;
      margin-left: 10px;
      background-color: rgb(35, 39, 56);
      border: none;
      color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
    }
    &-button {
      margin-right: -10px;
      margin-top: 20px;
      display: flex;
      &-item1 {
        width: 70px;
        height: 35px;
        border: none;
        border-radius: 1px;
      }
      &-item2 {
        width: 70px;
        height: 35px;
        margin-left: 10px;
        background-color: rgb(24, 144, 255);
        border: none;
        color: #fff;
        border-radius: 1px;
      }
      &-item3 {
        width: 70px;
        height: 35px;
        margin-left: 20px;
        border: none;
        color: #fff;
        border-radius: 1px;
        display: flex;
        &-title {
          color: #1890ff;
          line-height: 35px;
        }
        &-photo {
          height: 25px;
          margin-top: 3px;
        }
        &-photo img {
          height: 30px;
          width: 30px;
        }
      }
    }
  }
}
.content {
  width: 99%;
  margin-left: 0.5%;
  height: 585px;
  background-color: rgb(41, 45, 62);
  margin-top: 20px;

  &-btn {
    height: 60px;
    display: flex;
    margin-top: 25px;
    margin-right: 30px;
    float: right;

    &-item1 button {
      width: 80px;
      height: 35px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
    &-item2 button {
      width: 80px;
      height: 35px;
      // color: darkgray;
      border: none;
      border-radius: 1px;
      margin-left: 20px;
    }
    &-item3 button {
      width: 80px;
      height: 35px;
      color: darkgray;
      border: none;
      border-radius: 1px;
      margin-left: 20px;
    }
    &-img1 img,
    &-img2 img {
      width: 20px;
      height: 20px;
    }
    &-img1,
    &-img2 {
      margin-left: 20px;
      margin-top: 6px;
    }
  }
}
.btns {
  border: none;
  background: none;
  color: rgba(0, 98, 255, 0.83);
  font-size: 14px;
}
.unbtns {
  border: none;
  background: none;
  color: rgba(230, 230, 230, 0.548);
  font-size: 14px;
}
// 设备详情弹窗
.info-btn {
  // float: right;
  margin-left: 90%;
  margin-top: 20px;
  margin-bottom: -10px;
}
.info-first {
  &-item {
    display: flex;
    div {
      width: 50%;
      height: 40px;
    }
  }
}
</style>